<template>
  <div class="edit_container" :class="{ warn_edit_container: warnTextLength }">
    <quill-editor
      ref="myQuillEditor"
      toolbar="full"
      theme="snow"
      @textChange="onEditorChange($event)"
    >
    </quill-editor>
    <div class="text_number_tips" :class="{ warn_text_number_tips: warnTextLength }"
      >{{ currentLength }}/{{ maxTextLength }}</div
    >
  </div>
</template>

<script>
  import { QuillEditor } from '@vueup/vue-quill';
  import '@vueup/vue-quill/dist/vue-quill.snow.css';
  export default {
    components: {
      QuillEditor,
    },
    props: {
      value: {
        type: String,
        default: '',
      },
      max: {
        type: Number,
        default: 0,
      },
      validateMaxText: {
        type: Boolean,
        default: false,
      },
      id: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        content: this.value,
        currentLength: 0,
        defaultMaxLength: 2000,
        editorOption: {},
      };
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
      maxTextLength() {
        let len = this.defaultMaxLength;
        if (this.max >= 1) {
          len = this.max;
        }
        return len;
      },
      warnTextLength() {
        const warn = this.validateMaxText && this.currentLength > this.maxTextLength;
        return warn;
      },
    },
    methods: {
      onEditorBlur(editor) {}, // 失去焦点事件
      onEditorFocus(v) {}, // 获得焦点事件
      onEditorChange(v) {
        const text = this.$refs.myQuillEditor.getText();
        const hText = this.$refs.myQuillEditor.getHTML();
        this.currentLength = text.length - 1;
        this.$emit('input', hText);
        this.$emit('change', hText);
      }, // 内容改变事件
    },
  };
</script>

<style>
  .ql-editor {
    height: 400px;
  }

  .edit_container {
    width: 100%;
  }

  .edit_container .text_number_tips {
    margin-top: -30px;
    padding-right: 10px;
    float: right;
  }

  .warn_edit_container {
    border: solid 1px #f56c6c;
  }

  .warn_text_number_tips {
    color: #f56c6c;
  }
</style>
